<template>
	<view  :class="['con',getTypeClass]">
		<view class="sgoods">
			<view class="sgoodsli" v-for="(v,i) in goodsList"  @click="onGoodinfo(v.id,v.product_name)">
				<view class="sgoodsImg">
					<image :src="v.preview_img" mode="aspectFit"></image>
				</view>
				<block v-if="isType == 1">
					<view class="jiangbei jiangbei1" v-if="i == 0">
						<image src="https://img-cdn.duobashuzi.com/xianggui/img/jinagbei_01.png"></image>
					</view>
					<view class="jiangbei jiangbei2" v-else-if="i == 1">
						<image src="https://img-cdn.duobashuzi.com/xianggui/img/jinagbei_02.png"></image>
					</view>
					<view class="jiangbei jiangbei3" v-else-if="i == 2">
						<image src="https://img-cdn.duobashuzi.com/xianggui/img/jinagbei_03.png"></image>
					</view>
					<view class="conmtypelitexts" v-else>{{i+1}}</view>
				</block>
				<view class="sgoodsright">
					<view class="sgoodstext">{{v.product_name}}</view>
					<view class="sgoodsprice">
						<view class="sgoodspricetext">
							￥{{v.product_shop_price}}
						</view>
						<view class="qiang">马上抢</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="zanwu" v-if="zanwu">暂无更多数据</view>
		
	</view>
	
</template>

<script>
	import{getXgjBottomRecommendGoods,lookProductHistory} from '@/api/goodsList.js'
	export default {
		data() {
			return {
				goodsList:[],
				loading: false,   // 是否正在加载
				noMoreData: false, // 是否还有更多数据
				page: 1,          // 当前页
				pageSize: 10,
				isType:''
			}
		},
		 computed: {
			getTypeClass() {
			  return `type${this.isType}`; 
			}
		  },
		onLoad(e) {
			console.log(e)
			this.isType = e.type;
			if(this.isType == 1){
				uni.setNavigationBarTitle({
					title:"店铺热榜"
				});
				this.getRecommendlist(2)
				
			}else if(this.isType == 2){
				uni.setNavigationBarTitle({
					title:"为你推荐"
				});
				this.getRecommendlist(1)
			}else{
				uni.setNavigationBarTitle({
					title:"历史足迹"
				});
				this.getlookProductHistory();
			}
			
		},
		
		methods: {
			//跳转到商品详情页面
			onGoodinfo(id,text){
				
			// let data = this.baseList[e];
				uni.navigateTo({
					url: '/package/info/index?id='+id+'&title='+text
				});
			},
			getRecommendlist(e){
				if (this.loading || this.noMoreData) return;
				this.loading = true;
				let data = {
					type:e
				}
				getXgjBottomRecommendGoods(data,this.page).then(res=>{
					this.loading = false;
					if (res.result.data.length < this.pageSize) {
						this.noMoreData = true; // 如果返回的数据小于每页大小，表示没有更多数据
					  }
					  this.goodsList = [...this.goodsList, ...res.result.data]; // 将新数据合并到现有数据中
					  this.page++; // 下一页
				}).catch(err=>{
					 this.loading = false;
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			getlookProductHistory(){
				if (this.loading || this.noMoreData) return;
				this.loading = true;
				let data = {}
				lookProductHistory(data,this.page).then(res=>{
					this.loading = false;
					if (res.result.data.length < this.pageSize) {
						this.noMoreData = true; // 如果返回的数据小于每页大小，表示没有更多数据
					  }
					  this.goodsList = [...this.goodsList, ...res.result.data]; // 将新数据合并到现有数据中
					  this.page++; // 下一页
				}).catch(err=>{
					 this.loading = false;
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			// 滑动到底部加载更多
			loadMore() {
			  this.loadGoods();
			},
			jump(id,title){
				uni.navigateTo({
					url: '/package/info/index?id='+ id +'&title='+title
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.con{
		width: 100%;
		min-height: 100vh;
		
	}
	.type1{
		background: url(https://img-cdn.duobashuzi.com/xianggui/img/paihai_bj.png) no-repeat #f8f8f8;
		background-size: 100%;
	}
	.type2{
		background: url(https://img-cdn.duobashuzi.com/xianggui/img/bainzu.png) no-repeat #f8f8f8;
		background-size: 100%;
	}
	.type3{
		background: url(https://img-cdn.duobashuzi.com/xianggui/img/lszj.png) no-repeat #f8f8f8;
		background-size: 100%;
	}
	.u-status-bar{
		display: none;
	}
	.sgoods{
		width:95%;
		margin:0 auto;
		padding-top: 130px;
		.sgoodsli{
			width: 95%;
			padding: 10px 2.5%;
			margin-bottom: 20rpx;
			position: relative;
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			box-shadow:0 0 5px #ececec;
			.sgoodsImg{
				width: 240rpx;
				height: 240rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
				
			}
			.conmtypelitexts{
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #a4a5a7;
				font-size: 24rpx;
				font-weight: 600;
				background: linear-gradient(#fafafa, #eaeaea);
				position: absolute;
				left: 10px;
				top: 10px;
				text-align: center;
				border-radius: 50%;
				overflow: hidden;
			}
			.jiangbei{
				width: 50rpx;
				height:50rpx;
				position: absolute;
				left: 10px;
				top: 0;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.sgoodsright{
				width: 60%;
				position: relative;
				.sgoodstext{
					width: 100%;
					min-height: 50rpx;
					overflow: hidden;
					margin: 10rpx auto;
					color: #333;
					font-size: 28rpx;
					text-align: left;
					overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
				}
				
				.sgoodsprice{
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					color: red;
					font-size: 28rpx;
					font-weight: 600;
					text-align: center;
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					right: 0;
					bottom: 0;
					.qiang{
						width: 100rpx;
						border-radius: 30rpx;
						background: #ff4444;
						color: #fff;
						font-weight: 600;
						font-size:24rpx;
					}
				} 
				
			}
		}
		
	}
	
</style>